<template>
    <div class="list-container">
        <div class="acdemic-content">
            <template v-if="collectType === 'party' || collectType === 'projects'">
                <div class="content-list">
                    <div v-for="(item, index) in items" :key="index" class="list-item">
                        <NuxtLink :to="getDetailPath(item)">
                            <div class="item-main">
                                <h3>{{ item.article?.title || '' }}</h3>
                                <div class="meta">
                                    <span class="date">{{ formatDate(item.article?.publishDate) }}</span>
                                </div>
                            </div>
                        </NuxtLink>
                    </div>
                </div>
            </template>
            <template v-if="collectType === 'academic'">
                <div class="academic-list">
                    <div v-for="(item, index) in items" :key="index" class="list-item">
                        <div class="head-img">
                            <img :src="fileBase + item.article?.image || ''" alt="">
                        </div>
                        <NuxtLink :to="getDetailPath(item)" class="item-main">
                            <div>
                                <h3>{{ item.article?.title || '' }}</h3>
                                <div class="achievements">{{ item.article?.description }}</div>
                                <div class="label" v-for="tag in item.article?.tags" :key="item.id" :style="{
                                    border: `1px solid ${tag.color}`,
                                    color: tag.color
                                }">
                                    {{ tag.name }}</div>
                                <div class="date">{{ formatDate(item.article?.publishDate) }}</div>
                            </div>
                        </NuxtLink>
                    </div>
                </div>
            </template>
            <template v-if="collectType === 'science'">
                <div class="science-list">
                    <div v-for="item in items" :key="item.id" class="academic-card">
                        <div class="content">
                            <NuxtLink :to="getDetailPath(item)" class="link">
                                <div class="img">
                                    <img :src="fileBase + item.article?.image || ''" alt="">
                                </div>
                                <div class="info">
                                    <p class="title">{{ item.article?.title || '' }}</p>
                                    <div class="tags">
                                        <div v-for="tag in item.article?.tags" class="label"
                                        :style="{
                                            border:`1px solid ${tag.color}`,
                                            color:tag.color
                                            }">
                                        {{tag.name}}</div>
                                    </div>
                                    <div class="meta">
                                        <span class="date">
                                            <img src="/icon/index/icon1.png" alt='' />
                                            {{ formatDate(item.article?.publishDate) }}
                                        </span>
                                        <span class="download">
                                            <img src="/icon/index/icon2.png" alt='' />
                                            已下载{{ item.article?.downloads }}次
                                        </span>
                                    </div>
                                </div>
                            </NuxtLink>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup>
const { fileBase } = useRuntimeConfig().public

const props = defineProps({
    items: {
        type: Array,
        required: true
    },
    collectType: {
        type: String,
        default: 'common'
    },
    secondType: {
        type: String,
        default: 'common'
    },
    type: {
        type: String,
        default: 'common'
    },
    prevtype: {
        type: String,
        default: 'party'
    }
})

import { formatDate } from '@/utils/date'
const localePath = useLocalePath()

const getDetailPath = (item) => {
    return localePath(`/${props.collectType}/${props.secondType}/${item.articleId}`)
}

</script>

<style lang="scss">
.list-container {
    .acdemic-content {
        width: 100%;
        margin: 1.5rem 0 1rem;
        --border-color: #F6F6F6;
        --text-color: #333333;
        --date-color: #999999;
        --hover-color: #1867CA;
        --border-color: #F6F6F6;
        --intro-color: #9E9E9E;

        .content-list {

            .list-item {
                padding: .8rem 0;
                border-bottom: var(--border-color) 1px solid;
                width: 100%;
                position: relative;

                a {
                    display: block;
                    text-decoration: none;
                }

                .item-main {
                    display: flex;

                    h3 {
                        color: var(--text-color);
                        font-size: 1em;
                        width: 86%;
                        margin-right: calc(4% - 1rem);
                        font-weight: normal;
                        margin-left: 1rem;
                        cursor: pointer;
                    }

                    .meta {
                        color: var(--date-color);
                        font-size: 1rem;
                        width: 12%;
                        text-align: right;
                    }
                }

                &::before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    // left: 4.5rem;
                    width: 0;
                    height: 0;
                    border-left: .6rem solid var(--hover-color);
                    /* 左边框透明 */
                    border-right: .6rem solid transparent;
                    /* 右边框为黑色 */
                    border-top: .4rem solid transparent;
                    /* 上边框透明 */
                    border-bottom: .4rem solid transparent;
                }

                &:hover {
                    .item-main {
                        h3 {
                            color: var(--hover-color);
                        }
                    }

                    &::before {
                        border-left: .6rem solid var(--hover-color);
                        /* 左边框透明 */
                        border-right: .6rem solid transparent;
                        /* 右边框为黑色 */
                        border-top: .4rem solid transparent;
                        /* 上边框透明 */
                        border-bottom: .4rem solid transparent;
                    }
                }
            }

            @media screen and (max-width: 768px) {
                .list-item {
                    .item-main {
                        h3 {
                            font-size: .875rem;
                            width: 70%;
                            margin-right: .5rem;
                            margin-left: 0;
                        }

                        .meta {
                            width: calc(30% - .5rem);
                        }
                    }

                    &::before {
                        border: none;
                    }
                    &:hover {
                        &::before {
                            border: none;
                        }
                    }
                }
            }
        }

        .academic-list {


            .list-item {
                padding: .8rem 0;
                border-bottom: var(--border-color) 1px solid;
                width: 100%;
                cursor: pointer;
                display: flex;

                a {
                    display: block;
                    text-decoration: none;
                }

                .head-img {
                    width: 12rem;
                    height: 8rem;
                    margin-right: 1rem;

                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: .25rem;
                        object-fit: cover;
                    }
                }

                .item-main {
                    width: calc(100% - 12rem - 1rem);

                    // margin: .8rem 0;
                    h3 {
                        color: var(--text-color);
                        font-size: 1.1em;
                        width: 86%;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                    }

                    .label {
                        display: inline-block;
                        padding: .2rem .5rem;
                        border-radius: .25rem;
                        font-size: .9rem;
                    }

                    .achievements {
                        font-size: 1rem;
                        color: var(--text-color);
                        line-height: 1.4rem;
                        width: 86%;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        margin: 5px 0 10px
                    }

                    .date {
                        text-align: right;
                        color: #9E9E9E;
                        font-size: 1rem;
                    }
                }

                &:hover {
                    .item-main {
                        h3 {
                            color: var(--hover-color);
                        }
                    }
                }
            }

            @media screen and (max-width: 768px) {
                .list-item {
                    display: block;

                    .head-img {
                        width: 100%;
                        height: 14rem;
                        margin-right: 0;
                    }

                    .item-main {
                        margin-top: .8rem;
                        width: 100%;

                        h3 {
                            width: 100%;
                            font-size: .95rem;
                        }

                        .achievements {
                            width: 100%;
                            font-size: .85rem;
                            line-height: 1.2rem;
                            -webkit-line-clamp: 3;
                        }
                    }
                }
            }

        }

        .science-list {
            gap: 1.5rem;
            display: grid;
            grid-template-columns: repeat(3, 1fr);

            .academic-card {
                // width:calc((100% - 3 * 20px) / 4);
                background: white;
                border-radius: 5px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                transition: transform 0.3s;
                cursor: pointer;

                &:hover {
                    transform: translateY(-5px);
                }

                .content {
                    a {
                        text-decoration-line: none;
                    }

                    .img {
                        width: 100%;
                        height: 11rem;

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 5px 5px 0 0;
                            overflow: hidden;
                        }
                    }

                    .info {
                        padding: .5rem;

                        .title {
                            color: #333;
                            font-size: 1rem;
                            height: 3rem;
                            line-height: 1.6;
                            margin-bottom: .5rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                        }

                        .tags {
                            display: flex;
                            flex-wrap: wrap;
                            margin-bottom:.5rem;
                            height: 1.4rem;
                            .label {
                                color: #999;
                                font-size: 0.8rem;
                                border-radius: 5px;
                                display: inline-block;
                                padding: 2px .5rem;
                                margin-right: .3rem;
                            }
                        }

                        .meta {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            color: #666;
                            font-size: 1rem;

                            img {
                                width: 1.1rem;
                                height: 1.1rem;
                                vertical-align: -3px;
                                margin-right: .2rem;
                            }

                            .download {
                                color: #666;
                                text-decoration: none;
                                font-size: 1rem;
                            }
                        }
                    }
                }
            }

            @media screen and (max-width: 768px) {
                grid-template-columns: repeat(1, 1fr);
                gap: .8rem;

                .academic-card {
                    .content {
                        .img {
                            height: 14rem;
                        }
                    }
                }
            }
        }

        @media screen and (max-width: 768px) {
            margin: 1rem 0;
        }
    }
}
</style>